import React, { useEffect } from "react";

export default function Hook1() {
  //调用 React.useState                  0  创建新状态的初始值
  //  解构赋值的语法  count 状态变量   setCount 为修改状态的一个函数
  let [count, setCount] = React.useState(0); //返回值是一个数组
  //创建状态
  let [v, setV] = React.useState(0);
  
  //声明一个函数, 作为点击事件回调
  let handleClick = () => {
    //更新状态
    setCount(count + 1); //修改了状态
  };

  //使用 useEffect
  //情况一  该函数会在组件挂载完毕 和 组件更新完毕自动执行
  // 相当于是 componentDidMount 与 componentDidUpdate 的结合
  // useEffect(() => {
  //   console.log('执行啦~~');
  // })

  //情况二  该函数只会在组件挂载完毕之后执行
  // 相当于 componentDidMount  组件初始化工作
  // 常用操作:  1. 发送 AJAX  2. 定时器  3. 订阅频道  4. 操作 DOM
  // useEffect(() => {
  //   console.log('组件更新~~');
  // }, []); // [] 设定『哪些状态更新』之后, 会执行该回调

  //情况三
  // useEffect(() => {
  //   async function fn() {
  //     let result = await new Promise((resolve, reject) => {
  //       resolve("ok");
  //     });
  //   }
  //   fn();

  //   //返回一个函数  该函数相当于 componentWillUnmount 钩子
  //   1. 清除定时器  2. 清除频道订阅
  //   return () => {
  //     console.log("组件卸载了~~");
  //   };
  // }, []);

  //情况四    相当于 componentDidUpdate
  // 1. DOM 更新操作
  useEffect(() => {
    if(count !== 0){
      console.log('count 值发生了变化~~');
    }
  }, [count]) //

  //补充 useEffect 可以在组件中多次调用
  // useEffect(() => {
  //   console.log('挂载~~')
  // }, [])

  // useEffect(() => {
  //   console.log('挂载2~~')
  // }, [])

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={handleClick}>点击新增</button>
    </div>
  );
}
